<template>
    <div>
        <div class="wrap">
            <el-button class="changeBtn" @click="change" type="text">换一批</el-button>
            <el-button class="tableBtn" @click="table" type="text">{{text}}</el-button>

                <el-row :gutter="20">
                    <el-col v-if="cardView" :span="8" v-for="(item,i) in users" :key="i">
                        <el-card shadow="hover" :body-style="{ padding: '10px 0 0 0' }">
                            <img src="http://118.190.54.193/img/register.png" class="image">
                            <div class="card_body" style="padding: 14px;">
                                <p>
                                    <span>用户昵称：</span>
                                    <span>{{item.nickName}}</span>
                                </p>
                                <p>
                                    <span>用户名：</span>
                                    <span>{{item.userName}}</span>
                                </p>
                                <p>
                                    <span>创建时间：</span>
                                    <span>{{item.createdAt}}</span>
                                </p>
                                <p class="doIt">
                                    <el-tooltip class="item" effect="dark" content="查看用户" placement="left-start">
                                        <el-button @click="check(item._id)" size="mini" type="info" icon="el-icon-search" circle></el-button>
                                    </el-tooltip>
                                    <el-tooltip class="item" effect="dark" content="编辑用户" placement="top">
                                        <el-button size="mini" @click="edit(item._id)" type="primary" icon="el-icon-edit" circle></el-button>
                                        
                                    </el-tooltip>
                                    
                                    <el-tooltip class="item" effect="dark" content="删除用户" placement="right">
                                        <el-button size="mini" @click="deleted(item._id)" type="danger" icon="el-icon-delete" circle></el-button>
                                    </el-tooltip>
                                </p>
                            </div>
                        </el-card>
                    </el-col>
                    <el-table
                        v-if="tableView"
                        :data="tableData"
                        style="width: 100%">
                        <el-table-column
                            prop="createdAt"
                            label="日期"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="nickName"
                            label="姓名"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            align="right">
                            <template slot="header" slot-scope="scope">
                                <el-input
                                v-model="search"
                                size="mini"
                                placeholder="输入关键字搜索"/>
                            </template>
                            <template slot-scope="scope">
                                <el-button
                                size="mini"
                                @click="edit(scope.row._id)">编辑</el-button>
                                <el-button
                                size="mini"
                                type="danger"
                                @click="deleted(scope.row._id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
                <!-- 编辑信息弹窗 -->
                <el-dialog size="mini" title="修改用户信息" :visible.sync="userEditVisible">
                  <el-form size="mini" :model="cate">
                    <el-form-item label="用户昵称" :label-width="formLabelWidth">
                      <el-input v-model="cate.nickName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名" :label-width="formLabelWidth">
                      <el-input v-model="cate.userName" :disabled="true" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用户密码" :label-width="formLabelWidth">
                      <el-input v-model="cate.password" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="userEditVisible = false">取 消</el-button>
                    <el-button size="mini" type="primary" @click="editEnter()">确 定</el-button>
                  </div>
                </el-dialog>                
            </div>
        </div>
        
</template>

<script>
import * as api from '@/api/getUsersInfo'
export default {
    name:'UserInfo',
    data(){
        return{
            title:'用户管理中心',
            users:[],
            cardView:true,
            tableData:[],
            tableView:false,
            text:'切换成表格格式',
            userEditVisible:false,
            cate:{},
            formLabelWidth:'100px',
            id:'',
            search:[],
        }
    },
    watch:{
        text:function(val,oldVal){
            console.log(val)
        }
    },
    methods:{
        load(num){
            api.getUsersInfo({per:num}).then(data=>{
            let arr = data.data.users;
            arr.map(v=>{
                v.createdAt = v.createdAt.slice(0,10)
            })
            let newArr = []
            if(num==3){
                for(let i=0;i<3;i++){
                    let index = Math.floor(Math.random()*arr.length)
                    newArr.push(arr[index])
                }
                this.users = newArr
            }else{
                this.tableData = arr
            }
           
        })
        },
        change(){
            api.getUsersInfo({per:100}).then(data=>{
                let arr = data.data.users;
                arr.map(v=>{
                    v.createdAt = v.createdAt.slice(0,10)
                })
                let newArr = []
                for(let i=0;i<3;i++){
                    let index = Math.floor(Math.random()*arr.length)
                    newArr.push(arr[index])
                }
                this.users = newArr
            })
        },
        table(){
            if(this.text=="切换成表格格式"){
                api.getUsersInfo({per:1000}).then(data=>{
                    let arr = data.data.users;
                    arr.map(v=>{
                        v.createdAt = v.createdAt.slice(0,10)
                    })
                    this.tableData = arr
                    this.text='切换成卡片格式'
                    this.tableView=true
                    this.cardView=false
                })
            }else{
                api.getUsersInfo({per:100}).then(data=>{
                    let arr = data.data.users;
                    arr.map(v=>{
                        v.createdAt = v.createdAt.slice(0,10)
                    })
                    let newArr = []
                    for(let i=0;i<3;i++){
                        let index = Math.floor(Math.random()*arr.length)
                        newArr.push(arr[index])
                    }
                    this.users = newArr
                    this.text='切换成表格格式'
                    this.tableView=false
                    this.cardView=true
                })
            }
            
        },
        

        //改
        edit(id){
            this.id = id
            api.getUser(id).then(data=>{
                console.log(data)
                this.cate = {
                    nickName : data.data.nickName,
                    userName : data.data.userName,
                    password : data.data.password,
                    id:data.data._id
                }
                this.userEditVisible = true;
            })
        },

        editEnter(){
            this.$confirm('此操作将修改用户, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                api.editUserInfo(this.cate).then(data=>{
                    console.log(data.data)
                    this.load(100)
                })
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
                this.userEditVisible=false

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消修改'
                });          
            });
        },

        //删除
        deleted(id){
            console.log(id)
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                api.DeleteUsersInfo(id).then(data=>{
                    console.log(data)
                    this.users.map((v,i)=>{
                        if(v._id == id){
                            this.users.splice(i,1)
                        }
                    })
                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        }
    },
    mounted(){
        this.$emit('toparent',this.title)
        this.load(3)
    }

}
</script>

<style scoped>
    h2{
        color:#fff;
    }
    .el-row{
        padding:10px 0;
    }
    .el-col{
        margin-bottom:20px;
    }
    .el-card{
        text-align: center;
    }
    .card_body p {
        font-size:12px;
        text-align:left;
        text-indent:0;
        color:#333;
    }
    .card_body p span:nth-of-type(1){
        display: inline-block;
        width:80px;
        color:#666;
    }
    .card_body p span:nth-of-type(2){
        color:#333;
    }
    .card_body p:nth-of-type(1) span:nth-of-type(2){
        color:rgb(255, 102, 0);
    }
    .doIt{
        display: flex;
        justify-content: space-around;
        padding:20px;
    }
    .changeBtn{
        color:rgb(0, 136, 255);
    }
    .tableBtn,.el-dialog__title,.el-dialog__header >>> span{
        color:#333;
    }
    .wrap{
        background:rgb(251, 251, 251);
        width:100%;
        padding:0 20px;
        overflow: hidden;
        margin-top:40px;
        box-sizing: border-box;
    }
</style>


